﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
 <title>WMA Grpah</title>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
  <style>
  	body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,input,textarea { font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif; }  
  </style>
  
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script>
  <script src="http://code.highcharts.com/modules/exporting.js"></script>
  
   <script type="text/javascript">
	var chart;
	var name1='';
	$(document).ready(function () {
    
	//http://jsfiddle.net/NULTY/456/ <--check psudo code
	Highcharts.setOptions({
     colors: ['#463E3F', '#504A4B', '#848482', '#3EA055', '#4CC417', '#7FE817', '#8AFB17','#F70D1A','#FF0000', '#E55451', '#E77471','#E78A61','#157DEC','#1589FF','#6495ED','#6495ED','#3BB9FF','#82CAFA']
    }); 
       
		var colors = Highcharts.getOptions().colors,
			categories = [﻿ 'ภาค1 สสป.','ภาค1สสพ.','ภาค1 สสส.','ภาค2 สสญ.','ภาค2 สสท.','ภาค2 สสม.','ภาค2 สสล.','ภาค3 สสข.','ภาค3 สสช.','ภาค3 สสน.','ภาค3 สสมบ.','ภาค3 สสสภ.','ภาค4 สสต.','ภาค4 สสบ.','ภาค4 สสบท.','ภาค4 สสภ.','ภาค4 สสมส.','ภาค4 สสว.'],
			name = 'สาขา',
			level = 0,
			data = [{ y:98, color: colors[0], drilldown: { name: 'ภาค1 สสป.', categories: ['zone02','zone03','zone04','zone05','zone07','zone08','zone09','zone10','zone11'], level: 1, data: [{ y: 2, drilldown: { level: 2, name: 'zone02', categories: ['DMA01'], data: [2], color: colors[0] } },{ y: 8, drilldown: { level: 2, name: 'zone03', categories: ['DMA03','DMA04','DMA06','DMA07'], data: [1,3,3,1], color: colors[0] } },{ y: 9, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA06'], data: [7,2], color: colors[0] } },{ y: 13, drilldown: { level: 2, name: 'zone05', categories: ['DMA03','DMA04','DMA06'], data: [2,3,8], color: colors[0] } },{ y: 1, drilldown: { level: 2, name: 'zone07', categories: ['DMA07'], data: [1], color: colors[0] } },{ y: 9, drilldown: { level: 2, name: 'zone08', categories: ['DMA01','DMA02','DMA03','DMA04'], data: [1,1,2,5], color: colors[0] } },{ y: 12, drilldown: { level: 2, name: 'zone09', categories: ['DMA01','DMA02','DMA05','DMA07'], data: [2,6,2,2], color: colors[0] } },{ y: 36, drilldown: { level: 2, name: 'zone10', categories: ['DMA04','DMA05','DMA06','DMA07'], data: [17,9,2,8], color: colors[0] } },{ y: 8, drilldown: { level: 2, name: 'zone11', categories: ['DMA01','DMA02','DMA03','DMA04','DMA06'], data: [2,2,1,2,1], color: colors[0] } }], color: colors[0] } },{ y:52, color: colors[1], drilldown: { name: 'ภาค1สสพ.', categories: ['zone02','zone03','zone04','zone05','zone06','zone07','zone08'], level: 1, data: [{ y: 2, drilldown: { level: 2, name: 'zone02', categories: ['DMA04','DMA08'], data: [1,1], color: colors[1] } },{ y: 12, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02','DMA05','DMA06'], data: [3,2,3,4], color: colors[1] } },{ y: 7, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA02','DMA06','DMA09'], data: [1,1,1,4], color: colors[1] } },{ y: 19, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA04','DMA07','DMA08','DMA09'], data: [2,1,5,1,8,2], color: colors[1] } },{ y: 7, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03'], data: [2,2,3], color: colors[1] } },{ y: 1, drilldown: { level: 2, name: 'zone07', categories: ['DMA01'], data: [1], color: colors[1] } },{ y: 4, drilldown: { level: 2, name: 'zone08', categories: ['DMA01','DMA02','DMA03','DMA04'], data: [1,1,1,1], color: colors[1] } }], color: colors[1] } },{ y:72, color: colors[2], drilldown: { name: 'ภาค1 สสส.', categories: ['zone01','zone03','zone04','zone05','zone06','zone07'], level: 1, data: [{ y: 1, drilldown: { level: 2, name: 'zone01', categories: ['DMA05'], data: [1], color: colors[2] } },{ y: 17, drilldown: { level: 2, name: 'zone03', categories: ['DMA04','DMA08','DMA10','DMA12','DMA14'], data: [3,5,3,4,2], color: colors[2] } },{ y: 14, drilldown: { level: 2, name: 'zone04', categories: ['DMA08','DMA09','DMA10','DMA13','DMA14','DMA18'], data: [2,1,3,2,4,2], color: colors[2] } },{ y: 4, drilldown: { level: 2, name: 'zone05', categories: ['DMA09','DMA10'], data: [2,2], color: colors[2] } },{ y: 19, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03','DMA04','DMA08','DMA09'], data: [2,5,5,1,2,4], color: colors[2] } },{ y: 17, drilldown: { level: 2, name: 'zone07', categories: ['DMA03','DMA06','DMA08','DMA10'], data: [3,6,5,3], color: colors[2] } }], color: colors[2] } },{ y:27, color: colors[3], drilldown: { name: 'ภาค2 สสญ.', categories: ['zone01','zone03','zone04','zone05','zone06'], level: 1, data: [{ y: 2, drilldown: { level: 2, name: 'zone01', categories: ['DMA05','DMA06'], data: [1,1], color: colors[3] } },{ y: 13, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02','DMA05','DMA06','DMA13'], data: [1,3,1,1,7], color: colors[3] } },{ y: 3, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA04'], data: [1,2], color: colors[3] } },{ y: 3, drilldown: { level: 2, name: 'zone05', categories: ['DMA09','DMA10','DMA11'], data: [1,1,1], color: colors[3] } },{ y: 6, drilldown: { level: 2, name: 'zone06', categories: ['DMA02','DMA05','DMA06'], data: [1,1,4], color: colors[3] } }], color: colors[3] } },{ y:69, color: colors[4], drilldown: { name: 'ภาค2 สสท.', categories: ['zone01','zone02','zone03','zone04','zone05'], level: 1, data: [{ y: 5, drilldown: { level: 2, name: 'zone01', categories: ['DMA01','DMA04'], data: [3,2], color: colors[4] } },{ y: 12, drilldown: { level: 2, name: 'zone02', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA07'], data: [2,2,2,2,2,2], color: colors[4] } },{ y: 8, drilldown: { level: 2, name: 'zone03', categories: ['DMA05','DMA06'], data: [4,4], color: colors[4] } },{ y: 31, drilldown: { level: 2, name: 'zone04', categories: ['DMA05','DMA07','DMA08'], data: [2,3,26], color: colors[4] } },{ y: 13, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA05','DMA06','DMA07','DMA08'], data: [1,5,1,3,1,2], color: colors[4] } }], color: colors[4] } },{ y:40, color: colors[5], drilldown: { name: 'ภาค2 สสม.', categories: ['zone01','zone02','zone03','zone04','zone05','zone06'], level: 1, data: [{ y: 1, drilldown: { level: 2, name: 'zone01', categories: ['DMA02'], data: [1], color: colors[5] } },{ y: 5, drilldown: { level: 2, name: 'zone02', categories: ['DMA01','DMA07'], data: [4,1], color: colors[5] } },{ y: 4, drilldown: { level: 2, name: 'zone03', categories: ['DMA02','DMA06'], data: [3,1], color: colors[5] } },{ y: 6, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA04','DMA06','DMA07'], data: [1,2,1,2], color: colors[5] } },{ y: 13, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA05','DMA07','DMA09','DMA10'], data: [3,1,3,1,3,2], color: colors[5] } },{ y: 11, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA03','DMA07'], data: [2,4,5], color: colors[5] } }], color: colors[5] } },{ y:60, color: colors[6], drilldown: { name: 'ภาค2 สสล.', categories: ['zone01','zone02','zone03','zone04','zone05','zone06','zone07'], level: 1, data: [{ y: 1, drilldown: { level: 2, name: 'zone01', categories: ['DMA07'], data: [1], color: colors[6] } },{ y: 2, drilldown: { level: 2, name: 'zone02', categories: ['DMA07'], data: [2], color: colors[6] } },{ y: 3, drilldown: { level: 2, name: 'zone03', categories: ['DMA03','DMA08'], data: [1,2], color: colors[6] } },{ y: 21, drilldown: { level: 2, name: 'zone04', categories: ['DMA03','DMA06'], data: [20,1], color: colors[6] } },{ y: 5, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA05'], data: [2,1,2], color: colors[6] } },{ y: 7, drilldown: { level: 2, name: 'zone06', categories: ['DMA02','DMA03','DMA04','DMA09','DMA10'], data: [2,1,1,1,2], color: colors[6] } },{ y: 21, drilldown: { level: 2, name: 'zone07', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [1,4,1,4,2,3,6], color: colors[6] } }], color: colors[6] } },{ y:60, color: colors[7], drilldown: { name: 'ภาค3 สสข.', categories: ['zone01','zone02','zone03','zone04','zone05','zone06','zone07'], level: 1, data: [{ y: 5, drilldown: { level: 2, name: 'zone01', categories: ['DMA03','DMA04'], data: [1,4], color: colors[7] } },{ y: 4, drilldown: { level: 2, name: 'zone02', categories: ['DMA03','DMA04'], data: [1,3], color: colors[7] } },{ y: 29, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02','DMA03','DMA04'], data: [5,4,8,12], color: colors[7] } },{ y: 3, drilldown: { level: 2, name: 'zone04', categories: ['DMA03','DMA04'], data: [2,1], color: colors[7] } },{ y: 3, drilldown: { level: 2, name: 'zone05', categories: ['DMA01'], data: [3], color: colors[7] } },{ y: 3, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA03'], data: [1,2], color: colors[7] } },{ y: 13, drilldown: { level: 2, name: 'zone07', categories: ['DMA01','DMA02','DMA03','DMA04'], data: [2,4,3,4], color: colors[7] } }], color: colors[7] } },{ y:52, color: colors[8], drilldown: { name: 'ภาค3 สสช.', categories: ['zone01','zone02','zone03','zone04','zone05','zone06','zone07','zone08'], level: 1, data: [{ y: 8, drilldown: { level: 2, name: 'zone01', categories: ['DMA02','DMA04','DMA06'], data: [2,5,1], color: colors[8] } },{ y: 2, drilldown: { level: 2, name: 'zone02', categories: ['DMA02','DMA03'], data: [1,1], color: colors[8] } },{ y: 2, drilldown: { level: 2, name: 'zone03', categories: ['DMA05','DMA06'], data: [1,1], color: colors[8] } },{ y: 4, drilldown: { level: 2, name: 'zone04', categories: ['DMA03','DMA04'], data: [1,3], color: colors[8] } },{ y: 12, drilldown: { level: 2, name: 'zone05', categories: ['DMA02','DMA04','DMA06'], data: [1,8,3], color: colors[8] } },{ y: 1, drilldown: { level: 2, name: 'zone06', categories: ['DMA01'], data: [1], color: colors[8] } },{ y: 3, drilldown: { level: 2, name: 'zone07', categories: ['DMA03','DMA04','DMA05'], data: [1,1,1], color: colors[8] } },{ y: 20, drilldown: { level: 2, name: 'zone08', categories: ['DMA01','DMA02','DMA03'], data: [4,11,5], color: colors[8] } }], color: colors[8] } },{ y:13, color: colors[9], drilldown: { name: 'ภาค3 สสน.', categories: ['zone03','zone05','zone06','zone08'], level: 1, data: [{ y: 5, drilldown: { level: 2, name: 'zone03', categories: ['DMA03','DMA04','DMA05','DMA12'], data: [1,1,1,2], color: colors[9] } },{ y: 5, drilldown: { level: 2, name: 'zone05', categories: ['DMA03','DMA08','DMA11'], data: [3,1,1], color: colors[9] } },{ y: 2, drilldown: { level: 2, name: 'zone06', categories: ['DMA11'], data: [2], color: colors[9] } },{ y: 1, drilldown: { level: 2, name: 'zone08', categories: ['DMA02'], data: [1], color: colors[9] } }], color: colors[9] } },{ y:15, color: colors[10], drilldown: { name: 'ภาค3 สสมบ.', categories: ['zone01','zone02','zone05','zone06','zone08','zone09'], level: 1, data: [{ y: 1, drilldown: { level: 2, name: 'zone01', categories: ['DMA06'], data: [1], color: colors[10] } },{ y: 3, drilldown: { level: 2, name: 'zone02', categories: ['DMA03','DMA04'], data: [1,2], color: colors[10] } },{ y: 3, drilldown: { level: 2, name: 'zone05', categories: ['DMA01'], data: [3], color: colors[10] } },{ y: 6, drilldown: { level: 2, name: 'zone06', categories: ['DMA03','DMA05'], data: [2,4], color: colors[10] } },{ y: 1, drilldown: { level: 2, name: 'zone08', categories: ['DMA01'], data: [1], color: colors[10] } },{ y: 1, drilldown: { level: 2, name: 'zone09', categories: ['DMA02'], data: [1], color: colors[10] } }], color: colors[10] } },{ y:110, color: colors[11], drilldown: { name: 'ภาค3 สสสภ.', categories: ['zone01','zone03','zone04','zone05','zone06','zone07'], level: 1, data: [{ y: 1, drilldown: { level: 2, name: 'zone01', categories: ['DMA01'], data: [1], color: colors[11] } },{ y: 10, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02'], data: [1,9], color: colors[11] } },{ y: 23, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA03','DMA04'], data: [8,4,11], color: colors[11] } },{ y: 4, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA03'], data: [1,3], color: colors[11] } },{ y: 57, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [20,5,14,2,10,4,2], color: colors[11] } },{ y: 15, drilldown: { level: 2, name: 'zone07', categories: ['DMA01','DMA02','DMA05','DMA06'], data: [2,8,3,2], color: colors[11] } }], color: colors[11] } },{ y:48, color: colors[12], drilldown: { name: 'ภาค4 สสต.', categories: ['zone02','zone03','zone04','zone08','zone12','zone13','zone14','zone15','zone16'], level: 1, data: [{ y: 4, drilldown: { level: 2, name: 'zone02', categories: ['DMA05','DMA08'], data: [2,2], color: colors[12] } },{ y: 2, drilldown: { level: 2, name: 'zone03', categories: ['DMA03','DMA04'], data: [1,1], color: colors[12] } },{ y: 1, drilldown: { level: 2, name: 'zone04', categories: ['DMA01'], data: [1], color: colors[12] } },{ y: 13, drilldown: { level: 2, name: 'zone08', categories: ['DMA01','DMA02'], data: [8,5], color: colors[12] } },{ y: 3, drilldown: { level: 2, name: 'zone12', categories: ['DMA03'], data: [3], color: colors[12] } },{ y: 7, drilldown: { level: 2, name: 'zone13', categories: ['DMA01','DMA03'], data: [3,4], color: colors[12] } },{ y: 12, drilldown: { level: 2, name: 'zone14', categories: ['DMA01','DMA03','DMA05','DMA06','DMA07'], data: [3,5,1,2,1], color: colors[12] } },{ y: 1, drilldown: { level: 2, name: 'zone15', categories: ['DMA03'], data: [1], color: colors[12] } },{ y: 5, drilldown: { level: 2, name: 'zone16', categories: ['DMA02','DMA03','DMA07','DMA08'], data: [1,1,1,2], color: colors[12] } }], color: colors[12] } },{ y:19, color: colors[13], drilldown: { name: 'ภาค4 สสบ.', categories: ['zone01','zone03','zone04','zone05','zone06','zone07','zone08'], level: 1, data: [{ y: 1, drilldown: { level: 2, name: 'zone01', categories: ['DMA02'], data: [1], color: colors[13] } },{ y: 4, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA04'], data: [2,2], color: colors[13] } },{ y: 3, drilldown: { level: 2, name: 'zone04', categories: ['DMA03','DMA07'], data: [2,1], color: colors[13] } },{ y: 2, drilldown: { level: 2, name: 'zone05', categories: ['DMA02'], data: [2], color: colors[13] } },{ y: 5, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03','DMA05'], data: [1,1,1,2], color: colors[13] } },{ y: 3, drilldown: { level: 2, name: 'zone07', categories: ['DMA01','DMA02'], data: [2,1], color: colors[13] } },{ y: 1, drilldown: { level: 2, name: 'zone08', categories: ['DMA01'], data: [1], color: colors[13] } }], color: colors[13] } },{ y:13, color: colors[14], drilldown: { name: 'ภาค4 สสบท.', categories: ['zone02','zone04','zone05','zone07','zone08'], level: 1, data: [{ y: 8, drilldown: { level: 2, name: 'zone02', categories: ['DMA01','DMA03','DMA05','DMA07'], data: [1,3,2,2], color: colors[14] } },{ y: 2, drilldown: { level: 2, name: 'zone04', categories: ['DMA04'], data: [2], color: colors[14] } },{ y: 1, drilldown: { level: 2, name: 'zone05', categories: ['DMA02'], data: [1], color: colors[14] } },{ y: 1, drilldown: { level: 2, name: 'zone07', categories: ['DMA02'], data: [1], color: colors[14] } },{ y: 1, drilldown: { level: 2, name: 'zone08', categories: ['DMA10'], data: [1], color: colors[14] } }], color: colors[14] } },{ y:40, color: colors[15], drilldown: { name: 'ภาค4 สสภ.', categories: ['zone01','zone03','zone05','zone06','zone08','zone10'], level: 1, data: [{ y: 3, drilldown: { level: 2, name: 'zone01', categories: ['DMA04','DMA10'], data: [2,1], color: colors[15] } },{ y: 7, drilldown: { level: 2, name: 'zone03', categories: ['DMA06','DMA07','DMA08','DMA11'], data: [2,1,2,2], color: colors[15] } },{ y: 3, drilldown: { level: 2, name: 'zone05', categories: ['DMA02','DMA03'], data: [1,2], color: colors[15] } },{ y: 25, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA04','DMA05','DMA06','DMA08','DMA09'], data: [2,1,1,3,5,4,9], color: colors[15] } },{ y: 1, drilldown: { level: 2, name: 'zone08', categories: ['DMA01'], data: [1], color: colors[15] } },{ y: 1, drilldown: { level: 2, name: 'zone10', categories: ['DMA04'], data: [1], color: colors[15] } }], color: colors[15] } },{ y:23, color: colors[16], drilldown: { name: 'ภาค4 สสมส.', categories: ['zone01','zone03','zone06','zone09'], level: 1, data: [{ y: 9, drilldown: { level: 2, name: 'zone01', categories: ['DMA01','DMA04','DMA08','DMA10'], data: [1,1,1,6], color: colors[16] } },{ y: 4, drilldown: { level: 2, name: 'zone03', categories: ['DMA02','DMA06'], data: [1,3], color: colors[16] } },{ y: 7, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA04','DMA09'], data: [1,1,1,4], color: colors[16] } },{ y: 3, drilldown: { level: 2, name: 'zone09', categories: ['DMA01','DMA02'], data: [1,2], color: colors[16] } }], color: colors[16] } },{ y:13, color: colors[17], drilldown: { name: 'ภาค4 สสว.', categories: ['zone05','zone09','zone10','zone11','zone17','zone18'], level: 1, data: [{ y: 1, drilldown: { level: 2, name: 'zone05', categories: ['DMA07'], data: [1], color: colors[17] } },{ y: 1, drilldown: { level: 2, name: 'zone09', categories: ['DMA01'], data: [1], color: colors[17] } },{ y: 5, drilldown: { level: 2, name: 'zone10', categories: ['DMA02','DMA03','DMA05','DMA07'], data: [1,1,1,2], color: colors[17] } },{ y: 2, drilldown: { level: 2, name: 'zone11', categories: ['DMA04'], data: [2], color: colors[17] } },{ y: 1, drilldown: { level: 2, name: 'zone17', categories: ['DMA05'], data: [1], color: colors[17] } },{ y: 3, drilldown: { level: 2, name: 'zone18', categories: ['DMA02','DMA03'], data: [2,1], color: colors[17] } }], color: colors[17] } } ];
			
	   
		function setChart(name, categories, data, color, level) {
			chart.xAxis[0].setCategories(categories);
			chart.series[0].remove();
		   
		   
			chart.addSeries({
				name: name,
				data: data,
				level: level,
				color: color || 'white'
			});
		}
	   
		chart = new Highcharts.Chart({
			chart: {
				renderTo: 'container', 
				type: 'column'
			},
			title: {
				text: 'กราฟแสดงจำนวนจุดแตกรั่วของท่อประธาน'
			},
			subtitle: {
				text: 'จำนวนจุดแตกรั่วของท่อประธานของการประปานครหลวงรวมทุกสาขา'
			},
			xAxis: {
				categories: categories                     
			},
			yAxis: {
				title: {
					text: 'จำนวนจุดแตกรั่ว'
				}
			},
			plotOptions: {
				column: {
					cursor: 'pointer',
					point: {
						events: {
							click: function() {

								var drilldown = this.drilldown;
								if (drilldown) { // drill down
								
								this.series.chart.setTitle({
									    text: 'กราฟแสดงจำนวนจุดแตกรั่วของท่อประธาน'
									 }, {
										text:  'จำนวนจุดแตกรั่วของท่อประธานของการประปานครหลวงภายใน ' +name1 +' '+drilldown.name
										});
									//console.log(drilldown);
									name1 = drilldown.name;
								
									setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color, drilldown.level);
								} else { // restore
									name1 = '';
									chart.setTitle({
									    text: 'กราฟแสดงจำนวนจุดแตกรั่วของท่อประธาน'
									 }, {
										text: 'จำนวนจุดแตกรั่วของท่อประธานของการประปานครหลวงรวมทุกสาขา'
										});
									setChart(name, categories, data, null,level);
								}
							}
						}
					},
					dataLabels: {
						enabled: true,
						color: colors[0],
						style: {
							fontWeight: 'bold'
						},
						formatter: function() {
							return this.y +'จุด';
						}
					}               
				}
			},
			tooltip: {
				formatter: function() {
					/*var point = this.point, s = '';
					
					 switch (this.series.options.level) {
						case 0:
							s = 'row 1 level 1 instructions<br/>';
							s += ' row 2 level 1 instructions';
							break;
						
						case 1:
							s = 'row 1 level 2 instructions <br/>';
							s += ' row 2 level 2 instructions';
							break;
						
						case 2:
							s = 'row 1 level 3 instructions<br/>';
							s += 'row 2 level 3 instructions';
							break;
					}*/
						var point = this.point,
							s = this.x +'มีจุดแตกรั่วทั้งหมด จำนวน: <b>'+ this.y +'จุด</b><br/>';
						if (point.drilldown) {
							s += 'คลิ๊กเพื่อดูรายละเอียดของข้อมูลใน '+ point.category;
						} else {
							s += 'คลิ๊กเพื่อกลับไปดูข้อมูลรายสาขา';
						}
			 
				 
					return s;
				}
			},
			series: [{
				name: name,
				level: level,
				data: data,
				color: 'white'
			}],
			exporting: {
				enabled: false
			}
		});
	   
	   
	});
    
	</script>
  
</head>
<body>

<div id="container" style="height: 400px;"></div>

</body>
</html>